<template>
    <view class="index-scroll">
        <view class="report-list" v-for="(item,index) in reportList">
            <view class="textnoe">
                {{item.describe}}
                <text>{{item.r_name}}</text>
            </view>
            <view class="yftime">
                应付时间：<text>{{item.pay_date}}</text>
                <view class="floright">
                    金额：<text>{{item.price}}</text>元
                </view>
            </view>
            <view class="yftime">
                有效时间：<text>{{item.valid_date}}</text>
            </view>
            <view class="stylis">
                <view class="lisnoe">
                    <image src="/static/icon/bddh.png" mode=""></image>
                    拨打电话
                </view>
                <view class="listow">
                    <image src="/static/icon/yqsj.png" mode=""></image>
                    逾期{{item.date_num}}天
                </view>
                <view class="lisnoe" v-if="type===0" @click="confirmHandler(item.id,1)">
                    <image src="/static/icon/qrsk.png" mode=""></image>
                    确认收款
                </view>
                <view class="lisnoe" v-if="type===1" @click="confirmHandler(item.id,0)">
                    <image src="/static/icon/qrsk.png" mode=""></image>
                    取消收款
                </view>
                <view class="lisnoe" v-if="type===2" @click="confirmHandler(item.id,1)">
                    <image src="/static/icon/qrsk.png" mode=""></image>
                    确认已付
                </view>
                <view class="lisnoe" v-if="type===3" @click="confirmHandler(item.id,0)">
                    <image src="/static/icon/qrsk.png" mode=""></image>
                    取消已付
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "report-list",
        props:{
            reportList:{
                type: Array,

            },
            type:{
                type: Number,
            }
        },
        methods:{
            confirmHandler(id, pay_status) {
                let data = {
                    u_id: uni.getStorageSync('u_id'),
                    id: id,
                    pay_status: pay_status
                };
                uni.showLoading({title: '正在加载'});
                uni.$u.http.post('/api.php/house/save_bill_pay_status', data).then(res => {
                    uni.hideLoading();
                    uni.$u.toast('操作成功');
                    this.$emit('comfirm');
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .report-list{
        padding: 30rpx;
        height: 250rpx;
        background-color: white;
        margin-top: 20rpx;
        font-size: 14px;
        .stylis{
            width: 100%;
            height: 70rpx;
            // background-color: pink;
            margin-top: 10rpx;
            border: 1px solid #C0C0C0;
            display: flex;
            justify-content: space-around;
            .listow{
                width: 220rpx;
                height: 60rpx;
                // background-color: green;
                margin-top: 5rpx;
                font-size: 14px;
                line-height: 60rpx;
                text-align: center;
                color: #ffaa00;
                border-left: 1px solid #C0C0C0;
                border-right: 1px solid #C0C0C0;
                image{
                    width: 50rpx;
                    height: 50rpx;
                    vertical-align: middle;
                    margin-right: 10rpx;
                }
            }
            .lisnoe{
                width: 220rpx;
                height: 70rpx;
                // background-color: green;
                font-size: 14px;
                line-height: 70rpx;
                text-align: center;
                color: gray;
                image{
                    width: 50rpx;
                    height: 50rpx;
                    vertical-align: middle;
                    margin-right: 10rpx;
                }
            }
        }
        .yftime{
            width: 100%;
            height: 50rpx;
            // background-color: pink;
            margin-top: 10rpx;
            text{
                font-size: 12px;
                color: gray;
            }
            .floright{
                float: right;
            }
        }
        .textnoe{
            width: 100%;
            height: 50rpx;
            // background-color: pink;
            text{
                float: right;
            }
        }
    }

</style>